<template>
  <div class="wrap">
    <div class="titles">查询</div>
    <div class="sel">
      <div class="txt">关键词</div>
      <input type="text" placeholder="用户名/手机号" v-model="params.keyWord">
      <div class="btn" style="cursor: pointer;" @click="searchUserList()">搜索</div>
    </div>
    <div class="clear"></div>
    <div class="titles">全部</div>
    <el-table :data="userList" stripe style="width: 100%">
      
        <el-table-column align="center"  label="头像">
          <template slot-scope="scope">
            <img :src="scope.row.user.userImg"
            style="height:100px;width:100px;"
              alt>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="user.nickName" label="用户名称"></el-table-column>
        <el-table-column align="center" prop="user.userPhone" label="手机号"></el-table-column>
        <el-table-column align="center" prop="area" label="所属门店"></el-table-column>
        <el-table-column align="center" label="注册时间">
          <template slot-scope="scope">
            <div>
              <p>{{setDate(scope.row.user.registerTime)}}</p>
            </div>
          </template>
        </el-table-column>
        
    </el-table>
    <div style="text-align: center;padding:20px 0;">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changePage"
        :page-count="pageTotal">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Global from "../tool/Global.vue";
import axios from "axios";
import qs from "qs";
export default {
  data() {
    return {
        loading: false,
        params: {
            limit:10,
            page:1,
            partnerId:this.$store.state.partnerId,
            keyWord:''
        },
        userList :[],
        storeList: [],
        pageTotal: 1
    };
  },
  methods: {
    changePage( argv ) {
      this.params.page = argv;
      this.getUserList();
    },
    searchUserList () {
      this.getUserList()
    },

    /**
     * 获取用户列表
     */
    getUserList: function() {
      this.loading = true;
      let that = this;
      axios({
        method: "post",
        url: `${that.$store.state.url}/user/selectByPartnerId`,
        data: qs.stringify(that.params)
      }).then(res => {
        console.log(res);
        if (res.data.code == 0) {
          that.userList = res.data.data;
          this.pageTotal = Math.ceil ( res.data.count / 10 );
          that.userList.map( (val) => {
            let arr = []
            val.storeList.map ( (vals) => {
              arr.push(vals.storeName)
            })
            val.area = arr.toString()
          })
          console.log(that.userList)
        } else {
          this.$alert(res.data.msg);
        }
      });
    },
    editParMan: function() {
      this.$router.push({
        path: "main/editParMan"
      });
    },
    accParMan: function() {
      this.$router.push({
        path: "main/accParMan"
      });
    },
    /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function (str) {
        let times = new Date(str)
        return `${times.getFullYear()}-${times.getMonth() + 1 < 10 ? '0' + (times.getMonth() + 1) : times.getMonth() + 1 }-${times.getDate() < 10 ? '0' + times.getDate() : times.getDate()}`
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function (str) {
        let times = new Date(str)
        return `${times.getHours() < 10 ? '0' + times.getHours() : times.getHours()}:${times.getMinutes() < 10 ? '0' + times.getMinutes() : times.getMinutes()}:${times.getSeconds() < 10 ? '0' + times.getSeconds() : times.getSeconds()}`
    },
  },
  mounted () {
      this.getUserList()
  }
};
</script>
<style scoped>
.wrap {
  /* padding: 68px 136px; */
  width: 90%;
  margin: 30px auto
}
.titles {
  height: 62px;
  line-height: 62px;
  color: #778ca2ff;
  font-size: 14px;
  width: 100%;
  display: inline-block;
}
.sel {
  height: 32px;
  line-height: 32px;
  padding: 23px 20px;
  background: #fff;
}
.sel .txt {
  float: left;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: rgba(37, 38, 49, 1);
  font-weight: bold;
  width: 42px;
}
.sel input {
  float: left;
  width: 232px;
  height: 32px;
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  border: 1px solid rgba(232, 236, 239, 1);
  color: #888888;
  margin-left: 17px;
  text-align: center;
  box-sizing: border-box;
  outline: none;
}
.btn {
  float: left;
  color: #fff;
  width: 80px;
  height: 32px;
  background: #4B74FF;
  border-radius: 24px;
  border: 1px solid #4B74FF;
  text-align: center;
  margin-left: 37px;
}

.addpar {
  float: right;
  font-size: 14px;
  color: #fff;
  cursor: pointer;
  width: 114px;
  height: 32px;
  background: #4B74FF;
  border-radius: 24px;
  border: 1px solid #4B74FF;
  text-align: center;
  line-height: 32px;
}
</style>
